<script setup lang="ts">
import type { MyArticlesData } from '@/types/loginType'
import { useSearchInputStroe } from '@/stores/searchInputStore'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const userId = route.query.id as string

const editArticle = (id: string) => {
  if (userId === undefined) {
    // 跳转到文章编辑
    const url = router.resolve({
      name: 'work',
      query: {
        id: id
      }
    }).href
    window.open(url, '_blank')
  }
}
const { searchKeyWords } = useSearchInputStroe()
defineProps<{
  articles: MyArticlesData[]
}>()
</script>

<template>
  <ul>
    <li v-for="item in articles" :key="item.id">
      <div class="title">
        <span @click="searchKeyWords(item.title, 1)"
          ><b>{{ item.title }}</b></span
        >
        <span>
          <View class="view" v-if="item.published" />
          <Hide class="view" v-else />
        </span>
        <span></span>
        <span>{{ item.dateTime }}</span>
        <span class="reverse-button" @click="editArticle(item.id)">
          <TopRight class="top-right" />
        </span>
      </div>
      <div class="content">
        <p>{{ item.content }}</p>
      </div>
    </li>
  </ul>
</template>

<style scoped>
.top-right {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 24px;
  height: 24px;
}
ul {
  list-style: none;
  > li {
    margin-bottom: 20px;
    > .title {
      display: grid;
      grid-template-columns: 3fr 1fr 3fr 2fr 1fr;
      align-items: end;
      > span:nth-child(1):hover {
        background-color: var(--color3);
        color: var(--color1);
      }
      > span:nth-child(1) {
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        border-radius: var(--radius) var(--radius) 0 0;
        background-color: var(--color2);
        color: var(--color3);

        > b {
          display: block;
          max-width: 440px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      > span:nth-child(2) {
        position: relative;
        justify-self: center;
        background-color: var(--color2);
        border-radius: var(--radius) var(--radius) 0 0;
        height: 30px;
        width: 40px;
        > .view {
          position: absolute;
          left: 50%;
          top: 50%;
          translate: -50% -50%;

          height: 26px;
          width: 26px;
          color: var(--color3);
        }
      }

      > span:nth-child(4) {
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: var(--radius) var(--radius) 0 0;
        color: var(--color3);
      }
      > span:nth-child(5):hover {
        background-color: var(--color3);
        color: var(--color1);
      }
      > span:nth-child(5) {
        cursor: pointer;
        position: relative;
        height: 40px;
        width: 60px;
        border-radius: var(--radius) var(--radius) 0 0;
        justify-self: end;
        background-color: var(--color2);
        color: var(--color3);
      }
    }
    > .content {
      padding: 10px;
      border: 1px solid var(--color2);
      background-color: var(--color3);
      border-radius: 0 0 var(--radius) var(--radius);
      > p {
        display: -webkit-box;
        text-indent: 2em;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--color-font);
      }
    }
  }
}
</style>
